<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

    <div id="map"></div>

    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkOU6Ut2S2p90EyNlOx8HGaivgC8YD47s"></script>
    <script type="text/javascript" src="../build/mapv.js"></script>

    <script type="text/javascript">
        // Specify features and elements to define styles.
        var styleArray = [
            {
              featureType: "all",
              stylers: [
               { saturation: -80 }
              ]
            },{
              featureType: "road.arterial",
              elementType: "geometry",
              stylers: [
                { hue: "#00ffee" },
                { saturation: 50 }
              ]
            },{
              featureType: "poi.business",
              elementType: "labels",
              stylers: [
                { visibility: "off" }
              ]
            }
        ];


        // Create a map object and specify the DOM element for display.
        var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(39.3, -95.8),
            scrollwheel: false,
            zoom: 4
        });

        var resolutionScale = window.devicePixelRatio || 1;

        var randomCount = 200;
        var data = [];
        while (randomCount--) {
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
                },
                count: 30 * Math.random()
            });
        }

        var dataSet = new mapv.DataSet(data);

        var options = {
            fillStyle: 'rgba(255, 50, 50, 0.5)',
            maxSize: 80,
            styles: styleArray,
            draw: 'bubble'
        }

        var mapvLayer = new mapv.googleMapLayer(map, dataSet, options);

    </script>
	
</body>
</html>
